<template>
	<div class="Card">
		<div class="Card-header">
			<slot name="header"></slot>
		</div>
		<div class="Card-content">
			<slot name="content"> </slot>
		</div>
	</div>
</template>
<script>
export default {
	name: 'Card'
};
</script>
<style lang="scss" scoped>
.Card {
	background: #242424;
	box-shadow: 0px 0px 27px 0px rgba(247, 248, 250, 0.47) inset;
	border-radius: 11px;
	border: 1px solid #8e8e8e;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	&-header {
		width: 100%;
		padding: 8px 0 8px 16px;
		font-weight: 500;
		color: #ffffff;
		border-bottom: 1px solid rgba(210, 210, 210, 0.38);
		box-sizing: border-box;
	}
	&-content {
		padding: 16px;
		box-sizing: border-box;
		flex: 1;
	}
}
</style>
